<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">

    </div>
</body>
<script src="https://unpkg.com/vue@next"></script>
<script>
    /*
    原理，这个ref函数其实底层使用的是数据劫持实现数据响应
    reactive底层的hi通过reflat实现的
    使用，ref定义的响应式数据通过data.value访问，如果是基本数据类型，在html代码中使用插件语法是不需要写.vlalue
    reactive不需要使用.value，直接通过对象，属性访问，列如 job.tyoe,job.salary

    toref(响应式数据解构-对象)
    当响应式数据类型式对象时，我们想直接访问对象中的属性，就可以通过toref函数进行封装
    */
    const{ref,reactive,readonly,toRefs,toRef} =Vue
    const app = Vue.createApp({
        template: `
    <div>
    <h1>岗位：{{job.type}}</h1>
    <h1>薪资: {{job.salary}}</h1>
    <h1>姓名：{{name}}</h1>
    <h1>年龄：{{age}}</h1>
    </div>
    
    `,
    setup(props){
        let name = ref('andy');//普通数据，不是响应式数据
        let age = 25;
        let age1 = ref(age);
        let job ={type:'前端工程师'}
        let job1 = reactive(job)
        let type=toRef(job1,'type');
        let salary=toRef(job1,'type');
        setTimeout(()=>{
            age1.value=30;
            console.log('type =', type,'salary=',salary.value);
            type.value ='UI 设计'
            salary.value='60k'
            console.log(job);

        },2000);
        return {name,age,job,type,salary,salary,age1}
    }
  
    })
    const vm = app.mount('#app');

</script>

</html>